<template>
    <div class="toEvaluate-information-table-content">
        <div style="background: #fff;z-index: 99;padding-top: 10px;">
            <div style="display: flex;justify-content: center;margin: 10px 0 0 0;text-align: center;">
                <h2 style="color: #5ca3e5 !important;font-weight: 600;">审评专家评价</h2>
            </div>
        </div>
        <div class="inspector-information-bottom-v">
            <div class="inspector-registration-second-step" v-if="stepNum == 1">
                <!-- <div style="margin: 0 10px 10px 10px;">
                    <a-button style="margin-right: 10px;" class="blue-btn" @click="backclick">返回</a-button>
                    <a-button class="blue-btn" v-if="!isView" @click="getspcySqsxXpjlqueryPjrJcyHpjlList('1')">刷新</a-button>
                </div> -->
                <div style="background-color: #f0f2f5;">
                    <span class="fbpjrxm-title">申请事项信息</span>
                    <div class="inspector-table-from-a">
                        <div class="inspector-table-text">
                            <span class="table-text-s">事项名称:</span>
                        </div>
                        <div class="inspector-table-content">
                            <span>{{ sqsxInfo.fsxmc }}</span>
                        </div>
                    </div>
                    <div class="inspector-table-from-a">
                        <div class="inspector-table-text">
                            <span class="table-text-s">受理编号:</span>
                        </div>
                        <div class="inspector-table-content">
                            <span>{{ sqsxInfo.fslbh }}</span>
                        </div>
                    </div>
                    <div class="inspector-table-from-a">
                        <div class="inspector-table-text">
                            <span class="table-text-s">企业名称:</span>
                        </div>
                        <div class="inspector-table-content">
                            <span>{{ sqsxInfo.fqymc }}</span>
                        </div>
                    </div>
                    <div class="inspector-table-from-a">
                        <div class="inspector-table-text">
                            <span class="table-text-s">审评范围:</span>
                        </div>
                        <div class="inspector-table-content">
                            <span>{{ sqsxInfo.fcyjcfw }}</span>
                        </div>
                    </div>
                    <div class="inspector-table-from-a">
                        <div class="inspector-table-text">
                            <span class="table-text-s">审评类型:</span>
                        </div>
                        <div class="inspector-table-content">
                            <span>{{ sqsxInfo.fjclx }}</span>
                        </div>
                    </div>
                    <div class="inspector-table-from-a">
                        <div class="inspector-table-text">
                            <span class="table-text-s">技术审评时间:</span>
                        </div>
                        <div class="inspector-table-content">
                            <span>{{ sqsxInfo.fcykssj }} - {{ sqsxInfo.fcyjssj }}</span>
                        </div>
                    </div>
                </div>
                <div v-for="(item,index) in itemManList" :key="index" style="background-color: #f0f2f5;margin-top: 10px;">
                    <div>
                        <span class="fbpjrxm-title">被评价人：{{ item.fbpjrxm }}（{{ item.fbpjrzg }}）</span>
                    </div>
                    <div class="inspector-table-from-d" :id="'fljzlqk'+index">
                        <div class="inspector-table-text">
                            <span class="table-text-s">1、廉洁自律情况<span class="inspector-asterisk-v">*</span>：</span>
                        </div>
                        <div class="right-content-v">
                            <a-radio-group
                                v-if="!isView"
                                :name="item.fbpjrxm"
                                :value="item.fljzlqk ? item.fljzlqk : ''"
                                @change="checkChange($event.target.value, 'fljzlqk', item)"
                                :options="checkArray"
                                />
                            <span v-else>{{ item.fljzlqk }}</span>
                            <div class="tips-flex" :key='currentIdKey' v-if="currentId == 'fljzlqk'+index"><span class="tips-text-v">请选择该项评价</span></div>
                        </div>
                    </div>
                    <div class="inspector-table-from-d" :id="'fzdjcqd'+index">
                        <div class="inspector-table-text">
                            <span class="table-text-s">2、严格按方案进行技术审评<span class="inspector-asterisk-v">*</span>：</span>
                        </div>
                        <div class="right-content-v">
                            <a-radio-group
                                v-if="!isView"
                                :value="item.fzdjcqd ? item.fzdjcqd : ''"
                                @change="checkChange($event.target.value, 'fzdjcqd', item)"
                                :options="checkArray"
                                />
                            <span v-else>{{ item.fzdjcqd }}</span>
                            <div class="tips-flex" :key='currentIdKey' v-if="currentId == 'fzdjcqd'+index"><span class="tips-text-v">请选择该项评价</span></div>
                        </div>

                    </div>
                    <div class="inspector-table-from-d" :id="'fhdqxqk'+index">
                        <div class="inspector-table-text">
                            <span class="table-text-s">3、能发现所负责的职责范围内存在的缺陷情况<span class="inspector-asterisk-v">*</span>：</span>
                        </div>
                        <div class="right-content-v">
                            <a-radio-group
                                v-if="!isView"
                                :value="item.fhdqxqk ? item.fhdqxqk : ''"
                                @change="checkChange($event.target.value, 'fhdqxqk', item)"
                                :options="checkArray"
                                />
                            <span v-else>{{ item.fhdqxqk }}</span>
                            <div class="tips-flex" :key='currentIdKey' v-if="currentId == 'fhdqxqk'+index"><span class="tips-text-v">请选择该项评价</span></div>
                        </div>
                    </div>
                    <div class="inspector-table-from-d" :id="'fxcjcqxfj'+index">
                        <div class="inspector-table-text">
                            <span class="table-text-s">4、技术审评报告涵盖全部发现问题，缺陷描述清晰、 具体，按风险评定原则对缺陷分级且科学合理<span class="inspector-asterisk-v">*</span>：</span>
                        </div>
                        <div class="right-content-v">
                            <a-radio-group
                                v-if="!isView"
                                :value="item.fxcjcqxfj ? item.fxcjcqxfj : ''"
                                @change="checkChange($event.target.value, 'fxcjcqxfj', item)"
                                :options="checkArray"
                                />
                            <span v-else>{{ item.fxcjcqxfj }}</span>
                            <div class="tips-flex" :key='currentIdKey' v-if="currentId == 'fxcjcqxfj'+index"><span class="tips-text-v">请选择</span></div>
                        </div>
                    </div>
                    <div class="inspector-table-from-d" :id="'fxcjczy'+index">
                        <div class="inspector-table-text">
                            <span class="table-text-s">5、技术审评作业（或笔录）清晰、可追审评过程，能与审评报告中发现的问题和现场情况相对应<span class="inspector-asterisk-v">*</span>：</span>
                        </div>
                        <div class="right-content-v">
                            <a-radio-group
                                v-if="!isView"
                                :value="item.fxcjczy ? item.fxcjczy : ''"
                                @change="checkChange($event.target.value, 'fxcjczy', item)"
                                :options="checkArray"
                                />
                            <span v-else>{{ item.fxcjczy }}</span>
                            <div class="tips-flex" :key='currentIdKey' v-if="currentId == 'fxcjczy'+index"><span class="tips-text-v">请选择该项评价</span></div>
                        </div>
                    </div>
                    <div class="inspector-table-from-d" :id="'fzhpj'+index">
                        <div class="inspector-table-text">
                            <span class="table-text-s">6、综合评价<span class="inspector-asterisk-v">*</span>：</span>
                        </div>
                        <div class="right-content-v">
                            <a-radio-group
                                v-if="!isView"
                                :value="item.fzhpj ? item.fzhpj : ''"
                                @change="checkChange($event.target.value, 'fzhpj', item)"
                                :options="checkArray"
                                />
                            <span v-else>{{ item.fzhpj }}</span>
                            <div class="tips-flex" :key='currentIdKey' v-if="currentId == 'fzhpj'+index"><span class="tips-text-v">请选择该项评价</span></div>
                        </div>
                    </div>
                    <div class="inspector-table-from-d" :id="'fbz'+index">
                        <div class="inspector-table-text">
                            <span class="table-text-s">7、备注：</span>
                        </div>
                        <div class="right-content-v">
                            <a-textarea
                                v-if="!isView"
                                :value="item.fbz ? item.fbz : ''"
                                placeholder="请输入备注:"
                                v-model="item.fbz"
                                @blur="checkChange($event.target.value, 'fbz', item)"
                                :auto-size="{ minRows: 3}"/>
                            <span v-else>{{ item.fbz }}</span>
                        </div>
                    </div>
                    <div style="border-bottom: 5px solid #f6f6f6;margin: 8px 0;"></div>
                </div>
                <div style="display: flex;justify-content: center;">
                    <a-button v-if="!isView" class="blue-btn" @click="submitTo">提交</a-button>
                </div>
            </div>
            <div v-if="stepNum == 2">
                <a-result
                    status="success"
                    title="提交成功!"
                >
                </a-result>
            </div>
            <div v-if="stepNum == 3">
                <a-result
                    status="success"
                    title="已评价!"
                >
                </a-result>
            </div>
        </div>
    </div>
</template>
<script>
import {
    spcySqsxXpjlqueryRcJxDbList,
    spcySqsxXpjlqueryPjrJcyHpjlList,
    spcySqsxXpjlupdateJcyhpPj,
    spcySqsxXpjlrchpSubmit,
} from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            queryData:{},
            formField:{},
            currentIdKey:null,
            stepNum: '',
            validateArr:[],
            validateIdData:[
                'fljzlqk','fzdjcqd','fhdqxqk','fxcjcqxfj','fxcjczy','fzhpj'
            ],
            currentId:'',
            isView: false,
            checkArray: [
                { label: "优秀", value: "优秀" },
                { label: "合格", value: "合格" },
                { label: "不合格", value: "不合格" },
            ],
            itemManList : [],
            rckpJobInfo: {},
            sqsxInfo: {}
        }
    },
    watch:{

    },
    mounted(){
        document.title = 'xx“技术审评”审评查验信息一体化智慧管理系统'
        this.queryData = JSON.parse(this.$route.query.obj)
        this.getData(this.queryData)
    },
    methods:{
        getData(row){
            //console.log('得到的信息：',row)
            spcySqsxXpjlqueryRcJxDbList({...row}).then(res => {
                //console.log('返回数据：',res)
                if(res.success){
                    if(res.result.hpState == '已评价'){
                        this.stepNum = 3
                        return
                    }
                    this.rckpJobInfo = res.result.rckpJob
                    this.sqsxInfo = res.result.sqsx
                    this.getspcySqsxXpjlqueryPjrJcyHpjlList()
                }
            })
        },
        getspcySqsxXpjlqueryPjrJcyHpjlList(val){
            spcySqsxXpjlqueryPjrJcyHpjlList({...this.queryData}).then(res => {
                //console.log('返回数据222：',res)
                if(res.success){
                    this.itemManList = []
                    this.itemManList = res.result
                    this.stepNum = 1
                    if(val){
                        this.$message.success('刷新成功！')
                    }
                }
            })
        },
        backclick(){
            var that = this
            this.$confirm({
                title:'确认要返回吗？',
                onOk() {
                    that.stepNum = ''
                    that.$router.replace(`/consultationAppointmentTable`);
                }
            })

        },
        async checkChange(value, prototype, row){
            const cyxp = this.itemManList;
            const target = cyxp.find((c) => c.id == row.id);
            if (target) {
                target[prototype] = value;
            }
            this.itemManList = cyxp;

            const obj = {};
            obj[prototype] = value;
            obj["id"] = row.id;
            //console.log(this.itemManList)
            //console.log(obj)
            const res = await spcySqsxXpjlupdateJcyhpPj(obj);
            if (res.success) {
                // this.$message.success(res.message)
                this.currentId = ''
                this.getspcySqsxXpjlqueryPjrJcyHpjlList();
            }
        },
        validateChange(val){
            this.validateArr = []
            this.validateIdData.forEach(item=>{
                val.forEach((item2,index2)=>{
                    if(!val[index2][item]){
                        if(!this.validateArr.filter(l=>l == item).length){
                            this.validateArr.push(item+index2)
                        }
                    }
                })
            })
            //console.log('为空的',this.validateArr)
        },
        scrollIntoViewChange(val){
            //console.log('滚动',val)
            this.currentId = val
            this.currentIdKey = Date.now()
            const tabsId = document.querySelector('#'+val);
            //console.log(tabsId.offsetTop)
            document.querySelector('#'+val).scrollIntoView({
                top: tabsId.offsetTop+200,
                block: 'start',
                behavior: "smooth"
            })
        },
        // 提交
        submitTo(){
            this.validateChange(this.itemManList)
            if(this.validateArr.length){
                this.scrollIntoViewChange(this.validateArr[0])
                //console.log(this.validateArr)
                this.$message.warning('带星号为必填内容，请填写完整。')
            }else{
                let that = this
                that.$confirm({
                title:'确认要提交吗？',
                    onOk() {
                        //console.log('1111111111')
                        let data = {
                            jobid: that.rckpJobInfo.id
                        }
                        spcySqsxXpjlrchpSubmit(data).then(res=>{
                            if(res.code == 200){
                                that.stepNum = 2
                                that.isView = true
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }

        },
    }
}
</script>
<style lang="less">
.toEvaluate-information-table-content{
    overflow: hidden;
    .ant-steps-item-title{
        font-size:18px;
    }
    .inspector-information-bottom-v{
        height: calc(100vh - 94px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .inspector-info-step-v{
        margin: 0 10px;
        .ant-steps{
            display: flex;
        }
        .ant-steps-item-active::before{
            width: 0 !important;
            height: 0 !important;
        }
        .ant-steps-item-container{
            padding-bottom: 0;
        }
        .ant-steps-item::after{
            top: -9px;
            left: 90%;
            transform: rotate(45deg);
        }
        .ant-steps-item-icon {
            float: left;
            margin-right: 8px;
        }
        .ant-steps-item-content{
            min-height: 30px;
        }
    }
    .inspector-registration-first-step{
        margin: 10px 0;
        margin-top: 50px;
    }
    .fbpjrxm-title {
        background-color: rgb(102, 194, 79);
        text-align: center;
        font-family: '宋体' !important;
        font-weight: bold;
        // margin-top: 0.5em;
        color: white;
        border: 1px solid #e4e3e3;
        border-radius: 10px;
        padding: 5px;
        display: block;
    }
    .inspector-table-from-a {
        display: flex;
        margin:10px;
        align-items: center;
        .inspector-table-text{
            display: flex;
            align-items: center;
            .table-text-s{
                width: 115px;
                font-weight: 600;
                text-align: left;
                justify-content: flex-end;
                font-size:18px;
            }
        }
        .inspector-table-content {
            padding-left: 5px;
        }
    }
    .inspector-table-from-d{
        padding:10px;
        // display: flex;
        align-items: center;
        border-bottom: 1px solid #b2afaf;
        .inspector-asterisk-v{
            color:#f5222d;
            font-size: 24px;
            // display: flex;
            width: 6px;
            height: 16px;
            line-height: 21px;
        }
        .inspector-table-text{
            display: flex;
            align-items: center;
            .table-text-s{
                font-weight: 600;
                text-align: left;
                // display: flex;
                justify-content: flex-end;
                // width: 120px;
                font-size:18px;
                .inspector-asterisk-v{
                    padding-right: 10px;
                    line-height:27px;
                }
                .first-asterisk-v{
                    line-height: 50px;
                }
            }
        }

        .left-text-v{

        }
        .right-content-f{
            flex: 1;
            font-size:18px;
            input {
              background: #fff;
              font-size: 26px;
            }
            .ant-input:focus {
              box-shadow: none;
            }
            .inspector-table-code-btn-box{
                height: 32px !important;
                width: 110px;
            }
            .typeCheck-div {

                // margin-bottom: 10px;
                line-height: 1.8;
            }
            .ant-form {
              .ant-row {
                margin-bottom: 0 !important;
                margin-top: 20px;
                // /deep/ input:-webkit-autofill {
                //   -webkit-box-shadow: 0 0 0 0px transparent inset !important;
                //   background-color: transparent !important;
                // }
                // input:-internal-autofill-previewed,
                // input:-internal-autofill-selected {
                //   // -webkit-text-fill-color: #FFFFFF !important;
                //   outline: none;
                //   transition: background-color 5000s ease-in-out 0s !important;
                //   background-color: transparent !important;
                // }
                // /deep/ input:-internal-autofill-selected {
                //     transition: background-color 5000s ease-in-out 0s !important;
                //     background-color: transparent !important;
                // }
              }
            }
        }
        .right-content-v{
            flex: 1;
            font-size:18px;
            .inspector-table-code-btn-box{
                height: 32px;
                width: 88px;
            }
            .typeCheck-div {

                // margin-bottom: 10px;
                line-height: 1.8;
            }
        }
        .email-suffix-v{
            display: flex;
            align-items: center;
        }


    }
    .table-from-d-car{
        align-items: flex-start;
        .table-text-car{
            height: 40px;
            line-height: 40px;
        }
    }

    .itable-large-area{
        margin: 10px;
        .text-xfl{
            font-weight: 600;
            display: flex;
            .inspector-asterisk-v{
                color:#f5222d;
                padding-right: 15px;
                font-size: 24px;
                display: flex;
                width: 6px;
                height: 16px;
                line-height: 29px;
            }
        }
        .itable-content-v{
            margin: 0 10px;
            font-size:18px;
            .ant-checkbox-wrapper{
                font-size:18px;
            }
            .ant-checkbox-disabled + span {
                color: rgba(0, 0, 0, 0.65);
            }
        }
    }

    .inspector-registration-second-step{
        margin: 10px 0;
        .tips-flex{
            display: flex;
            padding-left: 96px;
            padding-bottom: 5px;
            margin-top: 5px;
            .tips-text-v{
                color: #f5222d;
            }
        }
    }
    .ant-input-disabled{
        background: #fff;
        color: rgba(0, 0, 0, 0.65);
    }
    .lb-list-checkbox{
        display: flex;
        align-items: flex-start;
        .ant-checkbox{
            margin-top: 7px;
        }
        .lb-type-list-v{
            .ant-checkbox{
                margin-top: 0px;
            }
        }
    }
    .a-select-option{
        font-size:18px
    }
    .ant-checkbox-wrapper + .ant-checkbox-wrapper {
        margin-left: 0;
    }
    .blue-btn{
        border: 1px solid #5ca3e5 !important;
        background-color: #5ca3e5 !important;
        color: #fff !important;
    }
    .code-text{
        display: inline-block;
        // width: 112px;
      }

      .code-btn-box:hover, .code-btn-box:focus{
        color: rgba(0, 0, 0, 1) !important;
        border-color: #d9d9d9 !important;

      }
      .text-color{
        color: #597ef7 !important;
      }
}
</style>
